<template>
    <!-- 方法事件处理器 -->
    <!-- ‘greet'方法 是下面定义过的函数 -->
    <div class="container">
        <h2>方法事件处理器</h2>
        <button @click="greet">点击我</button>
        <!-- 注意，下面的say（‘’）是内联事件处理器，（了解即可） -->
        <button @click="say('李礼晞')">这里是say</button>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const name = ref('lilixi')

const greet = (event) => {
    alert('Hello' + name.value) //发出提示

    // 'event' 是Dom原生事件
    if (event) {
        alert(event.target.tagName)
    }
}

const say = (event) => {
    alert('你好 ' + event)
}
</script>

<style scoped>
.container {
    background-color: rgb(192, 192, 192);
    border-radius: 15px;
    padding: 10px;
    margin: 10px;
}
</style>